<!DOCTYPE html>
<!-- 0. 注意：font-size是动态设置，宽度为屏幕1/10 -->
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<!-- 1. 标准视口，禁止缩放，初始缩放为1 -->
		<meta
			name="viewport"
			content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no"
		/>
		<title>敲电子木鱼</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.box {
				width: 5rem;
				height: 5rem;
				background-color: #000;
				border-radius: 0.1rem;
				margin: 1rem auto;
				display: flex;
				align-items: flex-end;
				justify-content: center;
			}
			.muyu {
				width: 3.75rem;
				height: 3rem;
				pointer-events: all;
				cursor: url(https://img.zhuayuya.com/icon_/bang.png), auto;
				transform: scale(1.1);
				transition: all .3;
			}
			.donghua {
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img
				class="muyu"
				src="https://img.zhuayuya.com/icon_/muyu.png"
				onclick="clickMuyu()"
			/>
		</div>

		<script>
			function setView() {
				document.documentElement.style.fontSize =
					screen.width / 10 + 'px';
			}
			setView();
			window.onresize = setView;

			let num = localStorage.getItem('num') || 0;
			let showGd = false;
			function clickMuyu() {
				showGd = true;
				num++;
				// console.log(num, '--');
				localStorage.setItem('num',num);
				console.log(document.getElementsByClassName('muyu')[0].classList, '--1');
				document.getElementsByClassName('muyu')[0].setAttribute('class', 'donghua');
				showGd = false;
			}

		</script>
	</body>
</html>
